<template>
    <div>
      <el-collapse class="top">
          <el-collapse-item title="拍卖会形式" name="1" class="line">
              <div :class="[index == choice1 ? 'selected' : 'item']" index="-1" @click="choose1(-1, '')">全部</div>
              <div :class="[index == choice1 ? 'selected' : 'item']" v-for="(item, index) in pmhlx" :key="index" @click="choose1(index, item)">{{ item }}</div>
          </el-collapse-item>
          <el-collapse-item title="拍卖会阶段" name="2" class="line">
              <div :class="[index == choice2 ? 'selected' : 'item']" index="-1" @click="choose2(-1, '')">全部</div>
              <div :class="[index == choice2 ? 'selected' : 'item']" v-for="(item, index) in pmhzt" :key="index" @click="choose2(index, item)">{{ item }}</div>
          </el-collapse-item>
          <!-- <el-collapse-item title="拍卖会状态" name="3" class="line">
              <div :class="[index == choice3 ? 'selected' : 'item']" index="-1" @click="choose3(-1, '不限')">不限</div>
              <div :class="[index == choice3 ? 'selected' : 'item']" v-for="(item, index) in pmzt" :key="index" @click="choose3(index, item)">{{ item }}</div>
          </el-collapse-item> -->
          <el-collapse-item title="开始时间" name="4" class="line">
              <div :class="[index == choice4 ? 'selected' : 'item']" index="-1" @click="choose4(-1, '')">全部</div>
              <div :class="[index == choice4 ? 'selected' : 'item']" v-for="(item, index) in kpsj" :key="index" @click="choose4(index, item)">{{ item }}</div>
          </el-collapse-item>
      </el-collapse>
      <div style="text-align: center;">
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
      
      <!-- <div class="top">
          <div class="row">
              <div class="title">标的物类型</div>
              <div class="item">不限</div>
              <div class="item" v-for="(item, index) in bdszd" :key="index">{{ item.value }}</div>
              <div class="item">更多</div>
          </div>
          <div class="row">
              <div class="title">标的物所在地</div>
              <div class="item">不限</div>
              <div class="item" v-for="(item, index) in bdszd" :key="index">{{ item.name }}</div>
              <div class="item">更多</div>
          </div>
          <div class="row">
              <div class="title">拍卖状态</div>
              <div class="item">不限</div>
              <div class="item" v-for="(item, index) in pmzt" :key="index">{{ item.value }}</div>
          </div>
          <div class="row">
              <div class="title">开拍时间</div>
              <div class="item">不限</div>
              <el-date-picker
              v-model="time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
              </el-date-picker>
              <div style="flex: 1;"></div>
              <el-button type="primary">确定</el-button>
          </div>
      </div> -->
  
      <div class="left">
          <div class="auction" v-for="(item, index) in auction" :key="index" @click="toLotList(item)">
              <img :src="item.fm"/>
              <div class="text">
                  <div class="name">{{ item.pmhmc }}</div>
                  <div class="pmqy">拍卖企业： {{ item.pmqy }}</div>
                  <div class="time">{{ item.kpsj }}  {{ item.pmhzt }}</div>
                  <div class="number">围观次数： {{ item.wgcs }}次    标的数量：  {{ item.count }}</div>
              </div>
          </div>
          <!-- <div class="lot">
              <img src="@/assets/logo.png"/>
              <div class="text">
                  <div class="name">test</div>
                  <div class="price">当前价20000元(3次出价)</div>
                  <div class="time">结束01-31 12:00:00</div>
              </div>
          </div>
          <div class="lot">
              <img src="@/assets/logo.png"/>
              <div class="text">
                  <div class="name">test</div>
                  <div class="price">当前价20000元(3次出价)</div>
                  <div class="time">结束01-31 12:00:00</div>
              </div>
          </div>
          <div class="lot">
              <img src="@/assets/logo.png"/>
              <div class="text">
                  <div class="name">test</div>
                  <div class="price">当前价20000元(3次出价)</div>
                  <div class="time">结束01-31 12:00:00</div>
              </div>
          </div> -->
      </div>
      
    </div>
  </template>
  
  <script>
  import { getSelect,getAuction, } from '@/api/auctionList/auctionList';
  export default {
      data(){
          return{
              index: -1,
              pmhlx: [],
              pmhzt: [],
            //   pmzt: [],
              kpsj: [],
              time: '',
              choice1: -1,
              choice2: -1,
              choice3: -1,
              choice4: -1,
              pmhlxSelected: '',
              pmhztSelected: '',
            //   pmztSelected: '',
              kpsjSelected: '',
              auction: [],
              pageno:1,
              countonepage:10,
              data:{
                pmhlx:"",
                pmhzt:"",
                sj:3,
                pageno:1,
                countonepage:10
              }
  
          }
      },
      methods: {
          getAll(){
            var data1 = 'name=拍卖会类型';
              getSelect(data1).then((res) => {
                console.log("拍卖会类型：",res);
                  if(res){
                      for(let item of res.data){
                          this.pmhlx.push(item.value);
                      }
                      // console.log(this.bdlx);
                  }
              });
              var data2 = 'name=拍卖会状态';
              getSelect(data2).then((res) => {
                console.log("拍卖会状态：",res);
                  if(res){
                      for(let item of res.data){
                          this.pmhzt.push(item.value);
                      }
                  }
              });
              
            //   getPmzt().then((res) => {
            //       if(res){
            //           for(let item of res.data){
            //               this.pmzt.push(item.value);
            //           }
            //       }
            //   });
            var data3 = 'name=拍卖会查询天数';
              getSelect(data3).then((res) => {
                console.log("拍卖会天数：",res);
                  if(res){
                      for(let item of res.data){
                          this.kpsj.push(item.value);
                      }
                  }
              })
          },
          choose1(index, item){
              // console.log(index);
              // console.log(item);
              this.choice1 = index;
              if(item == '')
              {
                  this.data.pmhzt = '';
              }
              else{
                  this.data.pmhlx = item;
              } 
          },
          choose2(index, item){
              this.choice2 = index;
              if(item == '')
              {
                  this.data.pmhzt = '';
              }
              else{
                  this.data.pmhzt = item;
              }
          },
        //   choose3(index, item){
        //       this.choice3 = index;
        //       if(item == '')
        //       {
        //           this.pmztSelected = '';
        //       }
        //       else{
        //           this.pmztSelected = item;
        //       }
        //   },
          choose4(index, item){
              this.choice4 = index;
              if(item == '')
              {
                  this.kpsjSelected = 0;
              }
              else{
                  this.kpsjSelected = item.replace(/[^\d]/g, '');
              }
          },
          submit(){
            console.log("data",this.data);
            //   let data = 'sj=' + this.kpsjSelected + '&pmhlx=' + this.pmhlxSelected + '&pmhzt=' + pmhztSelected ;
              getAuction(this.data).then((res) => {
                  if(res){
                      this.auction = res.data.list;
                      for(let i = 0; i < res.data.length; i++){
                          this.auction[i].kpsj = this.formatTime(res.data[i].kpsj);
                      }
                      console.log("拍卖会：",this.auction);
                  }
              })
          },
          formatTime(time){
              var dateee = new Date(time).toJSON();
              return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
          },
          toLotList(item){
            this.$router.push({
                path: '/lotList',
                query: {
                    pmhbh: item.pmhbh
                }
            });
          },
      },
      mounted(){
          this.getAll();
          this.choose1(-1,'');
          this.choose2(-1,'');
        //   this.choose3(-1,'');
          this.choose4(-1,'');
      }
  }
  </script>
  
  <style lang="less" scoped>
  /deep/.el-collapse-item__header{
      height: auto !important;
      display: block !important;
      // background-color: #3d40e5;
  }
  /deep/.el-card__body, .el-main{
      padding: 0px 20px !important;
      // background-color: #3d40e5;
  }
  .selected{
      background-color: #3d40e5;
      color: #fff;
      margin: 10px;
      padding: 4px;
      display: inline-block; 
  }
  .top{
      background-color: #fff;
      padding: 2px;
      // font-weight: bold;
      text-align: left;
      margin: 0 100px;
  }
  .top .line{
      display: inline-block; 
      // padding: 2px; 
      height: auto; 
      margin: 10px auto; 
      width: 96%;
  }
  .top .line .item{
      margin: 10px;
      padding: 4px;
      display: inline-block; 
  }
  .top .line .item:active{
      background-color: #3d40e5;
      color: #fff;
  }
  // .top .line a:link{
  //     font-weight: normal;
  //     color: #444;
  // }
  // .top .line a:visited{
  //     font-weight: bold !important;
  //     color: #3d40e5 !important;
  // }
  .middle{
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
  }
  .middle .lot{
      width: 23%;
      background-color: #fff;
  }
  .middle .lot img{
      padding: 10px;
      width: 90%;
  }
  .middle .lot .text .name{
      font-weight: bold;
  }
  .left{
    margin: 0 100px;
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 14px;
  }
  .left img{
    width: 250px;
    height: 200px;
  }
  .left .auction{
    width: 23%;
    margin: 10px 1%;
    background-color: #fff;
    cursor: pointer;
  }
  </style>